<template>
  <div id="anchorInfo">
    <h2 class="box-title">主播信息</h2>
    <div class="main">
      <a href="" class="avatar">
        <!-- 左边 -->
        <div class="left">
          <img :src="'https://imagev2.xmcdn.com/' + userInfo.logo" alt="" />
          <div class="aa">v{{ userInfo.anchorGrade }}</div>
        </div>
        <!-- 中间 -->
        <div class="middle">
          <p class="middle-title">{{ userInfo.nickname }}</p>
          <p class="ellipsis">{{ userInfo.personDescribe }}</p>
          <p>
            <van-icon name="friends-o" />{{
              useFormatPlayCount(anchorStatCountInfo?.followerCount)
            }}
          </p>
        </div>
        <!-- 左边 -->
        <div class="right">
          <van-icon name="contact" size="26" />
          <div class="jia">加关注</div>
        </div>
      </a>
      <div class="userComposition">
        <scz-card
          v-for="album in anchorList"
          :key="album.id"
          :albumItem="album"
        ></scz-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';

export default defineComponent({
  name: 'AnchorInfo',
});
</script>

<script setup lang="ts">
import { reqGetAnchorComposition } from '../../api/scz-detail';
import { useFormatPlayCount } from '@/mixin/playCount.ts';
const props = defineProps(['anchorId', 'userInfo', 'anchorStatCountInfo']);
const page = ref(1);
const pageSize = ref(3);
const anchorList = ref([]);
// 封装主播作品的函数
async function getAnchorComposition() {
  try {
    const res = await reqGetAnchorComposition(
      props.anchorId,
      page.value,
      pageSize.value
    );
    // console.log(res, '主播作品');
    anchorList.value = res.data.albumBriefDetailInfos;
  } catch (error) {
    console.log(error);
  }
}

// onMounted(() => {
//   getAnchorComposition();
// });

watch(
  () => props.anchorId,
  () => {
    getAnchorComposition();
  }
);
</script>

<style scoped>
.text {
  font-size: 14px;
}
.main {
  width: 100%;
  position: relative;
  .userComposition {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    height: 160px;
    /* background-color: violet; */
  }
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.avatar {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-left: 2px;
}
.avatar img {
  border-radius: 50%;
  width: 54px;
}
.aa {
  width: 30px;
  height: 16px;
  background-color: aqua;
  font-size: 15px;
  text-align: center;
  color: white;
  border-radius: 40%;
  position: absolute;
  bottom: 2px;
  left: 12px;
}
.box-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: -7px;
}
.middle {
  position: absolute;
  bottom: -3px;
  left: 62px;
  width: 225px;
  font-size: 12px;
  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.middle p {
  margin: 3px;
  color: #999;
}
.middle .middle-title {
  font-size: 15px; 
  color: #000;
}
.right {
  color: coral;
  position: absolute;
  bottom: 15px;
  left: 288px;
  text-align: center;
}
.jia {
  font-size: 13px;
  margin-top: -4px;
}
.left {
  margin-left: 5px;
  /* margin-top: -50px; */
}
</style>
